<template>
  <div>
      <!-- 轮播图 -->
      <mt-swipe :auto="4000" class="lunbotu">
        <mt-swipe-item v-for="item in lunbotu" :key="item.id">
            <img :src="item.image" alt="">
        </mt-swipe-item>
    </mt-swipe>
    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in icon" :key="item.id">
            <router-link :to="'/shopList/'+ item.id">
		      <img :src="item.icon" alt="">
		        <div class="mui-media-body">{{ item.name }}</div>
            </router-link>
        </li>
	</ul> 
    <!-- 分隔线 -->
    <divider></divider>
    <div class="home-bottom">
        <img src="/src/images/01.png" alt="">
        <img src="/src/images/02.png" alt="">
    </div>
  </div>

</template>
<script>
import divider from '../public/divider.vue'
export default {
    data(){
        return {
            lunbotu : [],
            icon: []
        }
    },
    created(){
        this.getlunbotu()
        this.geticon()
    },
    methods:{
        getlunbotu(){   //获取轮播图
           this.$http.get('https://locally.uieee.com/slides').then(result =>{
               this.lunbotu = result.data
                //console.log( result.data)
           }) 
        },
        geticon(){ //获取导航图标
            this.$http.get('https://locally.uieee.com/categories').then(result =>{
               this.icon = result.data
               // console.log( result.data)
           }) 
        }
    },
    //分割线组件
    components :{
        divider      
    }
}
</script>

<style lang="scss" scoped>
.lunbotu{
    height: 200px;
    .mint-swipe-item{
        img{
            width: 100%;
            height: 100%;
        }
         
    }
}
.mui-table-view{
   
    background-color: #fff;
    img{
        width: 40px;
        height: 40px;
    }
    .mui-media-body{
        font-size: 14px;
        color: #000;
    }
}
.home-bottom{
    background-color: #fff;
    display: flex;
    padding: 10px 20px;
    img{
        width: 49%;
        height: 100%;
    }
    justify-content: space-between;
}
</style>
